Favorite Visual Studio 2008 keyboard shortcuts

Here are a few indispensable keyboard shortcuts I use on a daily basis:

• Ctrl+K,Ctrl+C – Comment selected block of code
• Ctrl+K,Ctrl+U – UnComment selected block of code
• Ctrl+K,Ctrl+F – Format selected block of code
• Ctrl+Shift+B -Build solution

After doing some searching for a full list of keyboard shortcuts in VS2008, I found the below PDF.
http://www.microsoft.com/downloads/details.aspx?familyid=e5f902a8-5bb5-4cc6-907e-472809749973&displaylang=en

Enjoy.

Div on top of Silverlight

Have you tried overlaying a <div> on top of a Silverlight object? The only way to achieve this is by setting the Windowless property on the Silverlight object to true. Otherwise you will get get a result like figure 2.

Figure 1 – Windowless set to true.

 

Figure 2 – Windowless not set or set to false.

NBC Olympics video player

Over the weekend two big events happened in the world of Silverlight:

1. Silverlight 2 Beta 2 released,
2. NBCOlympics.com Silverlight 2 video player released.

We, Schematic, along with NBC, Microsoft, and DeltaTre have been working hard to get this to production for a live event. Currently on the site you can watch short clips of sports and interviews. When the Olympics trials and the Olympics arrive, you will be able to watch live sports with this video player.

Taking a step back, it’s amazing to think the majority of live Olympics sports will be broadcast in the US. Every other Olympics, that I remember, have only broadcast the sports that sell well (Beach volleyball, basketball, swimming). Sports like table tennis, shooting, weight lifting, or judo fan always take a back seat. This is a real opportunity for those sports to shine.

Links:
http://www.nbcolympics.com/video/
My boy Rafael’s post about the player
His second post

Popup Player

Enhanced player

Olympic sports module

WordPress blogging software

Lately I have been very busy with work and haven’t had much time to blog. However, the project is winding and it’s time to hop back on the blogging train. On an semi-related note, I have been using twhirl, an Adobe Air app for Twitter, so I decided to search for “Adobe Air WordPress”. Airpress came up, unfortunately their site is down, making it difficult to test. Then the bright idea came up try “WordPress Microsoft Word” and sure enough it’s built in. This site explains how to publish with Word 2007.

Screen shot of AirPress. This is mainly to test uploading images through the publish utility in Word.

Animations in Blend

The addition of the animation engine in Windows Presentation Foundation (WPF) allows designers and developers to animate objects without using third party software. Before getting into an example of how to work with animations, it is important to know the basics.

• Animations are time based. After setting a target value the animation interpolates the values from the current value to the target value.
• Storyboards are the container holding animations. Each Storyboard can hold multiple animations.
• Animation types include colors, numeric properties, points, and strings.

A simple example of a ball bouncing will show how to create animations in Blend.

Tip
Press the Shift key while drawing your ellipse. This ensures a perfect circle.

Create the Storyboard
First things first, create a ball. Use the ellipse tool from the toolbox and draw a circle on the Artboard. The next step is to create a Storyboard to hold the ball dropping animation. On the Interactions panel click the plus sign, Figure 1. A box will pop up asking what you would like to name your animation. Everyone has their own naming conventions. For simplicity, this example will stick with the default Storyboard1 name.

Figure 1

After creating the Storyboard you will notice the interface has changed. The Interactions panel expanded, a timeline appeared, and a red border lines the Artboard. This lets you know it is time to animate.

Animation workspaces
Blend accommodates for two different views when designing animations, the Design workspace and the Animation workspace. To switch between views click Window -> Activate Workspace -> Design Workspace/Animation Workspace. Figure 2 and Figure 3 show the difference between the two views.

Figure 2- Design workspace

Figure 3 – Animation workspace

Keyboard shortcut
F6 toggles between the Design Workspace and the Animation Workspace

Add animation to the Stoyboard
Now the Storyboard has been created, add the ball dropping animation. Click on the first second in the timeline, and then move the ball to the bottom of the screen. Notice a white dot appears on the timeline across from the ellipse. This indicates a keyframe has been created for that element at that time. Click on the play icon above the timeline to test the animation.

Figure 4

What values are changing – Transforms
The value that was changed when you moved the ball down was the Y value of the TranslateTransform. Transforms are used for positioning, sizing, and rotating. There are four types of transforms: Translate, Scale, Skew, and Rotate. When moving or sizing in the Artboard, Blend changes the value of the transforms by default. It is possible to animate the Height and Width properties, but you will have to do this by using the property window instead of changing the size of the object on the Artboard.
Every UI element has a Transform. You can find the Transform palette in the properties window. There are six tabs Translate, Rotate, Scale, Skew, Center Point, and Flip in that order.

Figure 5 – Transform palette

Make the bounce look natural
Up to this point you only have a ball that falls. There are three actions left to make the ball bounce look more natural: add easing, change the shape of the ball once it hits the ground, and make the ball bounce back up.

Easing
Currently the ball is falling at the same rate, making the animation feel unnatural. In general to make animations more natural you need to add acceleration and deceleration. In Blend this is done by Easing. Click on the white dot on the timeline. The Easing palette appears in the properties window. Click and drag the bottom left dot until you get a curve similar to that in Figure 6. With this curve, the ball will slowly drop then pick up speed as it approaches the ground, simulating gravity.

Figure 6

The ball hits the ground
Think of a racquetball hitting the ground. Once on the ground it changes shape, even if only for a split second. Along with simulating gravity this makes the bouncing ball animation more natural. Just like creating the first animation, click on timeline around 1.2 seconds. Then on the Artboard make the height of the ball smaller. Press play.

Figure 7 – Ball hitting the ground

Finally, make it bounce
Storyboards have the ability to automatically reverse themselves along with repeating the animation. To make the ball bounce you will make the Storyboard reverse and have the behavior repeat. On the Interaction panel click the title of the Storyboard, Figure 8. In the properties window the Common Properties for the Storyboard appear, Figure 9. Check AutoReverse and set the RepeatBehavir to Forever. Press Play
Figure 8

Figure 9

Create a video player in Silverlight 2 – Part 2

In part 1 we covered setting up a very basic video player. In part 2 we will add

• Scrubbing the video
• wiring up volume,
• and muting.

In future versions I will show how to display a buffer message, skin the controls, and how to work with media that’s not embedded in the xap.

1. Scrubbing
   • Add a MouseLeftButtonDown and MouseLeftButtonUp events for the slider in the constructor.
     
     
   • Add a property to lock the scrubber while the mouse button is down.
     
   • In the MouseLeftButtonDown event, set the scrubber lock to true.
     
   • In the MouseLeftButtonUp event, release the lock on the scrubber and update the position of the video.
     
   • Finally in the Tick event of the timer, prevent updating the position of the slider while the scrubber is locked.
     
2. Volume
   • XAML. It important to set the Min to 0 and the Max to 1. The MediaElements volume ranges from 0 to 1.
     
   • Register the ValueChanged event in the constructor for the slider.
     
   • Set the video’s volume to the value in the ValueChanged event.
     
   • Set the initial position of the slider to the video’s volume. You can either do this in the CurrentStateChanged event or the MediaOpened event of the MediaElement.
     
3. Mute button
   • XAML, add a ToggleButton
     
   • Register the Checked and UnChecked events in the constuctor for the mute button.
     
     
   • Add a variable to store the previous volume.
     
     
   • Checked event
     
     
   • UnChecked event
     
4. Resulting player
   

Files:
Instead of the whole project (because the video is embedded in the project), here are the two important pieces of this project

XAML

C#

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

Create a video player in Silverlight 2 – Part 1

Creating a video player in Silverlight is pretty simple. The MediaElement does all the heavy lifting, all you need to do is wire up a UI and you have a basic Video player. Here is a tutorial on how to create a simple video player from scratch using Silverlight 2.

1. Create a Silverlight application
2. Add a video to the project. This is for testing purposes only. Later in part 2 we will use a streaming video.
3. Add a MediaElement and a Toggle button for Play/Pause of the video.XAML
   

   C#
   

4. Add a Slider to show the position of the video. To show the progress of the video on the slider, we will need to create a DispatcherTimer. On the Tick event we will update the value of the slider. In this example I have set the value of the Tick to 50 milliseconds. There is minor jumping; if you want to get seamless indicator movment try going under 41 milliseconds. We also need to Start and Stop the timer. I am doing this on CurrentStateChanged event of the MediaElement.XAML
   

   C#
   

5. Add a TextBlock to show the exact position of the video. To update the text, I am adding this to the Tick event of the timer.XAML
   

   C#
   

6. Screen shot of the player at the end of Part 1
   

Links
Source (11Mb because of the WMV)
Part 2 of how to Create a video player in Silverlight 2

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

Atlanta Code Camp

My first code camp is over and done with. I got a chance to meet a lot of great people who are as interested and enthusiastic about Silverlight as I am. As promised here are the presentation and the code from my presentation on Saturday.

A couple notes: the presentation is saved as a pptx, so e-mail or leave me a comment if you would like a ppt. As for the code, make sure you change the port the xml file is coming from. This will be in the Page.xaml.cs

Presentation (zip)
Code (zip)

References

Silverlight 1.0 gallery
http://silverlight.net/community/gallerydetail.aspx?cat=3&sort=2

Microsoft Developer reference poster
http://brad_abrams.members.winisp.net/Projects/Mix08SL2Poster/Silverlight2PosterMIX08.png

XAML overview
http://msdn2.microsoft.com/en-us/library/ms752059.aspx

Silverlight 2 controls:
http://silverlight.net/Samples/2b1/SilverlightControls/run/default.html

Scott Guthries first look at Silverlight 2
http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

MSDN Silverlight
http://msdn2.microsoft.com/en-us/library/cc303041.aspx

Atlanta Code Camp 2008

This weekend the Atlanta Code Camp 2008 is being held.  It should be a lot of fun and very interesting.  This year there are 8 different track (see below) with some really great/interesting presentations scheduled.  For Silverlight Shawn Wildermuth, Steve Porter, Keith Rome, and myself will be presenting.  I will be giving the Introduction to Silverlight 2 talk, so stay tuned for the presentation.

Atlanta Code camp track:
Silverlight
Web
Data/SQL
Architecture
3.5 Framework and Future Technologies
Beyond the Framework
.NET Fundamentals
Office/Sharepoint

Hope to see you there!

Data visualizations

Today I recieved an e-mail to The Best Tools for Visualization.  For the past five years I have worked in a world where there is really only one way to display data, THE GRID.  To be exact, the .NET DataGrid.  This control alone has employed many developers and has allowed them to make a living (remember The DataGrid Girl?).

These application have pushed the limits on how we think and view data.  With Silverlight we have the opputunity join the data visualization revolution.  It’s time to get out of the mindset of writing a stored procedures and hooking them to a datagrids.  Challenge yourself and your users.

Over the next few weeks I will be working on creating a data visualization project in Silverlight, and I will use the Animation Engine I have created as the basis for motion.

Stay tuned.